<template>
  <view class="newsDetail">
    <view class="newsDetail-title">
      <uni-nav-bar
        title="动态详情"
        leftIcon="left"
        @clickLeft="backTo()"
        shadow="true"
      ></uni-nav-bar>
    </view>
    <view class="newsDetail-news">
      <view class="newsDetail-body">
        <view class="newsDetail-body-header">
          <view class="item-header-left">
            <image :src="newsDetail.user.avater" />
            <text>{{ newsDetail.user.nickname }}</text>
          </view>
          <view class="item-header-right">
            <button
              type="primary"
              size="mini"
              plain="true"
              v-if="!newsDetail.concern"
            >
              关注
            </button>
            <button type="primary" size="mini" v-else>已关注</button>
          </view>
        </view>
        <view class="newsDetail-body-content">
          <text>{{ newsDetail.content }}</text>
        </view>
        <view :class="img_showStyle">
          <image
            :src="img"
            v-for="(img, index) in newsDetail.images"
            mode="aspectFill"
            @click="previewImage(index)"
          />
        </view>
        <view class="newsDetail-body-bottom">
          <view class="newsDetail-body-bottom-viewer">
            <text>浏览次数- {{ newsDetail.viewer_count }}次</text>
          </view>
          <view class="newsDetail-body-bottom-like">
            <image
              src="../../static/img/like.png"
              class="newsDetail-body-bottom-like-icon"
              v-if="!newsDetail.is_favor"
            ></image>
            <image
              src="../../static/img/liked.png"
              class="newsDetail-body-bottom-like-icon"
              v-else
            ></image>
            <text>{{ newsDetail.favor_count.length }}</text>
          </view>
        </view>
      </view>
      <text>全部评论 ({{ newsDetail.comment_count }})</text>
      <view>
        <view
          class="parent"
          v-for="(item, index) in newsDetail.comment"
          :key="index"
        >
          <view class="parent-left">
            <image :src="item.user__avatar" class="parent-avatar"></image>
          </view>
          <view class="parent-right">
            <view class="parent-right-header">
              <view class="parent-right-header-name">
                <text>{{ item.user__nickname }}</text>
                <text>{{ item.create_date }}</text>
              </view>
              <view
                class="parent-right-header-handle"
                @click="onClickShowCommentModal"
                :data-nid="newsDetail._id"
                :data-cid="item.id"
                :data-nickname="item.user__nickname"
                :data-depth="item.depth + 1"
                :data-rid="item.id"
                :data-rootindex="index"
              >
                <image src="../../static/img/reply.png"></image>
                <!-- <image src="../../static/img/"></image> -->
              </view>
              <!-- <text>{{item.content}}</text>
							<text @click="onClickShowCommentModal"
							:data-nid="newsDetail._id"
							:data-cid="item.id"
							:data-nickname="item.user__nickname"
							:data-depth="item.depth + 1"
							:data-rid="item.id"
							:data-rootindex="index">回复</text> -->
            </view>
            <view class="child" v-if="item.child">
              <view v-for="(node, idx) in item.child">
                <view>
                  <text>{{ node.content }}</text>
                  <text
                    @click="onClickShowCommentModal"
                    :data-nid="newsDetail._id"
                    :data-cid="node.id"
                    :data-nickname="node.user__nickname"
                    :data-depth="node.depth + 1"
                    :data-rid="item.id"
                    :data-rootindex="idx"
                    >回复</text
                  >
                </view>
              </view>
              <view @click="getMore" data-root="item.id" data-idx="idx"
                >查看更多</view
              >
            </view>
          </view>
        </view>
      </view>
    </view>

    <view class="newsDetail-comment">
      <view class="newsDetail-comment-area" v-if="isShowCommentModal">
        <view class="top">
          <image class="big-avatar" :src="newsDetail.user.avater"></image>
          <text>评论</text>
          <view class="reply" v-if="reply.cid"
            >回复 {{ reply.nickname }}
            <icon type="clear" size="15" @click="onClickClearReply"></icon>
          </view>
        </view>
        <uni-easyinput
          type="textarea"
          v-model="reply.value"
          :focus="true"
          placeholder="评论内容..."
          @input="inputComment"
        ></uni-easyinput>
        <view class="btn">
          <view class="publish" @click="onClickPostComment">发布</view>
        </view>
        <view class="hide">
          <icon
            type="cancel"
            size="30"
            @click="onClickCancelCommentModal"
          ></icon>
        </view>
      </view>
      <view class="text-input" v-else>
        <image class="big-avatar" :src="newsDetail.user.avater"></image>
        <input
          placeholder="说点什么..."
          @click="onClickShowCommentModal"
          :data-nid="newsDetail._id"
          data-depth="1"
        />
      </view>
    </view>
  </view>
</template>

<script>
import API from '../../config/api.js'
export default {
  data() {
    return {
      isShowCommentModal: false,
      reply: {},
      newsDetail: {
        _id: '123',
        concern: true,
        content:
          '你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好',
        user: {
          nickname: 'xin',
          avater:
            'https://hbimg.huabanimg.com/27cadf1a2281400d36844d2adff2a8803a28459c24173-gGAkWK_fw658/format/webp',
        },
        images: [
          'https://hbimg.huabanimg.com/506a7337f59bc512eb80cf8962d95c9a86d6fe3f2b68d-AwCIwe_fw658/format/webp',
          'https://hbimg.huabanimg.com/506a7337f59bc512eb80cf8962d95c9a86d6fe3f2b68d-AwCIwe_fw658/format/webp',
          'https://hbimg.huabanimg.com/18ca0956fefa1726e92c1904b44294d2425784f3e7299-H3Zhn3_fw658/format/webp',
          'https://hbimg.huabanimg.com/94bdde85ea37041332cfac7203b6297fa8aa6a79d50e8-BO1W3K_fw658/format/webp',
          // "https://hbimg.huabanimg.com/e57c09e5b1b1365ea842ff10501a8df8007dbcb3769b4-a4c4yr_fw658/format/webp"
        ],
        favor_count: 6,
        comment_count: 10,
        viewer_count: 9,
        is_favor: false,
        comment: [
          {
            id: 7,
            content: '3',
            depth: 1,
            user__nickname: '大卫-3',
            user__avatar:
              'https://hbimg.huabanimg.com/94bdde85ea37041332cfac7203b6297fa8aa6a79d50e8-BO1W3K_fw658/format/webp',
            create_date: '2021-12-17',
            child: [
              {
                id: 19,
                content: '111',
                depth: 2,
                user__nickname: '大卫-0',
                user__avatar:
                  'https://hbimg.huabanimg.com/94bdde85ea37041332cfac7203b6297fa8aa6a79d50e8-BO1W3K_fw658/format/webp',
                create_date: '2021-12-19',
                reply_id: 7,
                reply__user__nickname: '大卫-3',
              },
            ],
          },
        ],
      },
    }
  },
  onLoad: function (option) {
    console.log(option.newsID)
    var that = this
    uni.request({
      url: API.News,
      data: {
        newsID: '62029db170cd9d7caa911ac5',
      },
      method: 'GET',
      dataType: 'JSON',
      success: function (res) {
        console.log(res.data.newsDetail)
        that.newsDetail = res.data.newsDetail
      },
    })
    // uni.request({
    //     url: API.News,
    // 	data: {
    // 		newsID: '62029db170cd9d7caa911ac5',

    // 	},
    //     method: 'GET',
    //     dataType: 'json',
    // 	responseType: 'text',
    //     success: (res) => {
    // 		console.log(res.data.newsDetail);

    // 		this.newsDetail = res.data.newsDetail;

    //       this.setData({
    //           newsDetail: res.data,
    //       })
    // var that = this;
    // (function(len) {
    // 	var curStyle;
    // 		switch(len) {
    // 			case 1: curStyle = "imgOne"; break;
    // 			case 2: curStyle = "imgContainer";break;
    // 			case 4: curStyle = "imgFour"; break;
    // 			default: curStyle = "imgContainer"
    // 		}
    // 		that.setData({
    // 		   showStyle: curStyle
    // 		})
    // 	})(res.data.images.length)
    //     } ,
    // })
  },
  computed: {
    img_showStyle: function () {
      if (this.newsDetail.images.length == 1) return 'item-body-img1'
      else if (this.newsDetail.images.length == 2) return 'item-body-img2'
      else if (this.newsDetail.images.length == 3) return 'item-body-img3'
      else return 'item-body-img4'
    },
  },
  methods: {
    backTo: function () {
      uni.navigateBack({})
    },
    previewImage: function (index) {
      uni.previewImage({
        current: index,
        urls: this.newsDetail.images,
      })
    },
    onClickClearReply: function () {
      this.reply = {
        nid: this.newsDetail._id,
        depth: 1,
      }
    },
    inputComment: function (e) {
      this.reply.content = e
      console.log(this.reply.content)
    },
    onClickPostComment: function () {
      if (this.reply.content == null) {
        uni.showToast({
          title: '发表内容为空!',
          icon: 'error',
        })
        return
      }
      uni.request({
        url: API.Comment,
        data: {
          news: this.reply.nid,
          content: this.reply.content,
          reply: this.reply.cid,
          depth: this.reply.depth,
          root: this.reply.rid,
        },
        method: 'post',
        dataType: 'json',
        responseType: 'text',
        success: res => {
          console.log(res)
          if (res.statusCode == 201) {
            if (res.data.reply == null) {
              const comment = this.newsDetail.comment
              comment.push(res.data)
              this.newsDetail.comment = comment
              this.newsDetail.comment_count++
              this.onClickCancelCommentModal()
            } else {
              const rootIndex = this.reply.rootindex
              const child = this.newsDetail.comment[rootIndex].child
              child.unshift(res.data)
              this.newsDetail.comment[rootIndex].child = child
              this.newsDetail.comment_count++
              this.onClickCancelCommentModal()
            }
          }
        },
      })
    },
    onClickCancelCommentModal: function () {
      this.isShowCommentModal = false
    },
    onClickShowCommentModal: function (e) {
      // console.log(e.currentTarget.dataset);
      this.reply = e.currentTarget.dataset
      this.isShowCommentModal = true
    },
  },
}
</script>

<style>
.newsDetail {
}
.newsDetail-title {
  height: 150rpx;
  position: fixed;
  top: 0rpx;
  right: 0rpx;
  left: 0rpx;
  z-index: 99;
}
.newsDetail-news {
  padding-top: 100rpx;
  padding-bottom: 200rpx;
}
.newsDetail-title {
  /* box-shadow: 0rpx -12rpx 40rpx #C0C0C0; */
  /* padding-top: 50rpx; */
}
.newsDetail-body {
  padding: 20rpx;
  border-bottom: 2rpx solid rgba(0, 0, 0, 0.2);
}
.newsDetail-body-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 10rpx;
  padding-bottom: 30rpx;
}
.item-header-left {
  display: flex;
  align-items: center;
}
.item-header-left image {
  height: 100rpx;
  width: 100rpx;
  border-radius: 50%;
  margin-right: 20rpx;
}
.newsDetail-body-content {
  margin-bottom: 20rpx;
}
.item-body-img1 image {
  width: 100%;
  border-radius: 20rpx;
}
.item-body-img2 {
  display: flex;
  justify-content: space-around;
}
.item-body-img2 image {
  height: 320rpx;
  width: 320rpx;
  border-radius: 20rpx;
}
.item-body-img3 {
  display: flex;
  justify-content: space-around;
}
.item-body-img3 image {
  height: 220rpx;
  width: 220rpx;
  border-radius: 20rpx;
}
.item-body-img4 {
  display: grid;
  grid-template-columns: 342rpx 342rpx;
  grid-template-rows: 342rpx 342rpx;
  grid-row-gap: 20rpx;
  grid-column-gap: 20rpx;
}
.item-body-img4 image {
  height: 342rpx;
  width: 342rpx;
  border-radius: 20rpx;
}
.newsDetail-body-bottom {
  padding: 10rpx 0rpx;
  display: flex;
  align-items: center;
}
.newsDetail-body-bottom-viewer text {
  font-size: 30rpx;
}
.newsDetail-body-bottom-like {
  display: flex;
  align-items: center;
}
.newsDetail-body-bottom-like-icon {
  margin-left: 10rpx;
  margin-right: 15rpx;
  height: 60rpx;
  width: 60rpx;
}
.newsDetail-comment {
  padding: 20rpx;
}

//评论展示
.parent {
  width: 100%;
  display: flex;
}
.parent-left {
  flex: 1;
}
.parent-right {
  flex: 5;
}
.parent-avatar {
  height: 60rpx;
  width: 60rpx;
  border-radius: 50%;
}
.parent-right-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.parent-right-header-name {
  display: flex;
  flex-direction: column;
}
.parent-right-header-handle image {
  height: 50rpx;
  width: 50rpx;
  margin-right: 20rpx;
}
.parent-right-header-like image {
  height: 50rpx;
  width: 50rpx;
}
.child {
  margin-left: 40rpx;
  background-color: #ddd;
}

//评论样式
.big-avatar {
  height: 60rpx;
  width: 60rpx;
  border-radius: 50%;
  margin-right: 15rpx;
}

.small-avatar {
  height: 40rpx;
  width: 40rpx;
  border-radius: 50%;
  margin-right: 10rpx;
}

.newsDetail-comment {
  border-top: 1px solid #ddd;
  background-color: white;
  position: fixed;
  bottom: 0;
  right: 0;
  left: 0;
  padding: 40rpx;
}

.newsDetail-comment .text-input {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
}

.newsDetail-comment .text-input input {
  border: 1rpx solid #ddd;
  background-color: #f5f5f5;
  width: 575rpx;
  padding: 10rpx;
  border-radius: 20rpx;
}

.newsDetail-comment .newsDetail-comment-area {
  position: relative;
}

.newsDetail-comment .newsDetail-comment-area .top {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  padding-bottom: 10rpx;
}
.newsDetail-comment .newsDetail-comment-area .reply {
  margin-left: 30rpx;
  font-size: 25rpx;
  padding: 10rpx;
  display: flex;
  flex-direction: row;
  align-items: center;
  background: #ddd;
  border-radius: 10rpx;
}

.newsDetail-comment .newsDetail-comment-area .reply icon {
  padding: 0 8rpx;
}

.newsDetail-comment .newsDetail-comment-area textarea {
  border: 1rpx solid #ddd;
  width: 628rpx;
  padding: 20rpx;
}
.newsDetail-comment .btn {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  padding: 10rpx 0;
}

.newsDetail-comment .btn .publish {
  padding: 10rpx 20rpx;
  background-color: #00c8b6;
  color: white;
  border-radius: 10rpx;
}

.newsDetail-comment .newsDetail-comment-area .hide {
  position: absolute;
  right: 0;
  top: -20rpx;
}
</style>
